<template>
    <div class="home">
        <el-container>
            <el-header>
                <div class="header">
                    <div class="logo">
                        <img src="../../assets/images/home/logo-white.png" alt="">
                    </div>
                    <div class="nav">
                        前端第一阶段阶段考试
                    </div>
                    <div class="login-after">
                        <div class="avatar">
                            <img :src="avatar" alt="">
                        </div>
                        <div class="name">
                            <div class="dialog">
                                <div style="font-size: 13px;width:60px;color:aliceblue">
                                    {{ name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="main">
                    <div class="left">
                        <div class="card">
                            <div class="line"></div>
                            <div class="title">答题卡</div>
                        </div>
                        <div class="single">
                            <div class="title">单选题（共10题，合计20分）</div>
                        </div>
                        <div class="topic">
                            <div class="num" v-for="(item1, index1) in topicData">
                                <div class="top">{{ index1 + 1 }}</div>
                                <div class="btm"></div>
                            </div>
                        </div>
                        <div class="double">
                            <div class="title">多选题（共10题，合计20分）</div>
                        </div>
                        <div class="topics">
                            <div class="num" v-for="item in 10">
                                <div class="top">1</div>
                                <div class="btm"></div>
                            </div>
                        </div>
                        <div class="msg">
                            <div class="do"></div>
                            <div class="">已答</div>
                            <div class="dont"></div>
                            <div class="">未答</div>
                            <div class="img">
                                <img src="../../assets/images/Tests/test-star2.png" alt="">
                            </div>
                            <div class="">收藏</div>
                        </div>
                    </div>
                    <div class="center">
                        <div class="s-title">
                            单选题（共10题，合计20分）
                        </div>
                        <!-- 单选 -->
                        <div class="topic" v-for="(item1, index1) in topicData" :key="item1._id"
                            v-if="item1.type == '0'">
                            <p>{{ index1 + 1 }}. {{ item1.topics }}</p>
                            <el-radio-group v-model="radio">
                                <el-radio :label="3">{{ item1.options[0] }}</el-radio>
                                <el-radio :label="6">{{ item1.options[1] }}</el-radio>
                                <el-radio :label="9">{{ item1.options[2] }}</el-radio>
                                <el-radio :label="7">{{ item1.options[3] }}</el-radio>
                            </el-radio-group>
                            <div class="answer">
                                <div><span>
                                    <img src="../../assets/images/analysis/analysis.png" alt="">
                                </span>答错了</div>
                                <div>考生答案：B</div>
                                <div>正确答案：A</div>
                                <div>答案解析：答非所问，词不达意。</div>
                            </div>
                        </div>
                        <!-- 多选 -->
                        <div class="d-title">
                            多选题（共10题，合计20分）
                        </div>
                        <div class="topic" v-for="(item2, index2) in topicData" :key="item2._id"
                            v-if="item2.type == '1'">
                            <p>{{ index2 + 1 }}. {{ item2.topics }}</p>
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="复选框 A" style="width:600px;line-height: 2;">{{
                                    item2.options[0]
                                }}</el-checkbox>
                                <el-checkbox label="复选框 B" style="width:600px;line-height: 2;">{{
                                    item2.options[1]
                                }}</el-checkbox>
                                <el-checkbox label="复选框 C" style="width:600px;line-height: 2;">{{
                                    item2.options[2]
                                }}</el-checkbox>
                                <el-checkbox label="复选框 D" style="width:600px;line-height: 2;">{{
                                    item2.options[3]
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="right">
                        <div class="time">
                            <div>考试成绩</div>
                            <div class="t1">20.0</div>
                        </div>
                        <div class="time">
                            <div>考试时长</div>
                            <div class="t1">00：54:34</div>
                        </div>
                        <div class="btn">
                            <el-button style="margin-left:3px;margin-top:20px;font-size:12px" @click="open">返回考试中心</el-button>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer>
                Copyright &copy; 2021 成都蜗牛创想科技有限公司
            </el-footer>
        </el-container>
    </div>
</template>

<script>

export default {
    data() {
        return {
            _id: "",
            loginAfter: false,
            name: "",
            avatar: "",
            radio: 3,
            checkList: [''],
            topicData: [],
        };
    },
    methods: {
      open() {
        this.$router.push({
            path:"/home/index"
          })
      }
    },
    async created() {
        const userInfo = JSON.parse(localStorage.getItem("userInfo"));
        console.log("userInfo", userInfo);
        if (userInfo) {
            //用户已登录
            this.loginAfter = false;
            //获取用户信息
            this.avatar = userInfo.avatar;
            this.name = userInfo.name;
        } else {
            this.loginAfter = true;
        }
        this._id = this.$route.query._id;
        const res = await this.$api.test.findTestsByIdApi({ _id: this._id });
        if (res.code) {
            //获取成功
            this.topicData = res.data.exerciseId;
        }
        console.log("试题信息", res);
    },
}
</script>
<style lang="scss" scoped>
.main {
    width: 1050px;
    margin-left: 130px;
    margin-top: 20px;
    display: flex;

    .left {
        width: 200px;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
        border-radius: 8px;

        .card {
            display: flex;
            margin-top: 10px;

            .line {
                width: 4px;
                height: 18px;
                background-color: #6966eb;
                margin-left: 15px;
            }

            .title {
                margin-left: 10px;
                font-size: 14px;
            }
        }

        .single {
            .title {
                font-size: 12px;
                margin-left: 15px;
                margin-top: 10px;
            }
        }

        .topic {
            width: 180px;
            border-bottom: 1px solid #e6e6e6;
            ;
            margin-left: 15px;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

            .num {
                width: 30px;
                height: 50px;
                border: 1px solid white;

                .top {
                    width: 30px;
                    height: 23px;
                    background-color: #6966eb;
                    border-radius: 4px 4px 0px 0px;
                    text-align: center;
                }

                .btm {
                    width: 30px;
                    height: 23px;
                    margin-top: 2px;
                    background-color: #f1f3f8;
                }
            }
        }

        .double {
            .title {
                font-size: 12px;
                margin-left: 15px;
                margin-top: 10px;
            }
        }

        .topics {
            width: 180px;
            height: 120px;
            margin-left: 15px;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

            .num {
                width: 30px;
                height: 50px;
                border: 1px solid white;

                .top {
                    width: 30px;
                    height: 23px;
                    background-color: #6966eb;
                    border-radius: 4px 4px 0px 0px;
                    text-align: center;
                }

                .btm {
                    width: 30px;
                    height: 23px;
                    margin-top: 2px;
                    background-color: #f1f3f8;
                }
            }
        }

        .msg {
            width: 200px;
            height: 50px;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
            border-radius: 0px 0px 8px 8px;
            margin-top: 100px;
            display: flex;

            div {
                font-size: 12px;
                margin-top: 20px;
                margin-left: 5px;
                line-height: 10px;
            }

            .do {
                width: 10px;
                height: 10px;
                background-color: #726fff;
                margin-left: 50px;
            }

            .dont {
                width: 10px;
                height: 10px;
                background-color: #f1f3f8;
            }

            .img {
                width: 10px;
                height: 10px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .center {
        width: 700px;
        //height: 400px;
        margin-left: 10px;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
        border-radius: 8px;

        .s-title {
            width: 700px;
            height: 40px;
            background-color: #f5f5f5;
            border-radius: 8px 8px 0px 0px;
            line-height: 40px;
            padding-left: 10px;
        }

        .d-title {
            width: 700px;
            height: 40px;
            background-color: #f5f5f5;
            border-radius: 8px 8px 0px 0px;
            line-height: 40px;
            padding-left: 10px;
        }

        .topic {
            width: 660px;
            height: 330px;
            margin-left: 20px;
            margin-top: 20px;
            .answer{
                width: 600px;
                height: 150px;
                margin-left: 10px;
                margin-top: 20px;  
                div{
                    font-size: 13px;
                    margin-top: 10px;
                }
                span{
                    width: 10px;
                    height: 10px;
                    img{
                        width: 13px;
                        height: 13px;
                        margin-right: 10px;
                    }
                }
            }

            p {
                font-size: 12px;
            }
        }
    }

    .right {
        width: 120px;
        height: 230px;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
        border-radius: 8px;
        margin-left: 10px;
        .time{
            width: 120px;
            text-align: center;
            margin-top: 10px;
            .t1{
                color: red;
                font-size: 19px;
                margin-top: 8px;
            }
        }
        .prog{
            width: 120px;
            text-align: center;
            margin-top: 20px;
            .p1{
                margin-top: 10px;
            }
        }
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #69b0f6e4;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.el-radio-group {
    display: grid;

}

.el-radio {
    line-height: 2;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-header {
    height: 60px;
    background-color: #6966eb;
    box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
}

.el-dialog__body {
    width: 500px;
}

.el-main {
    color: #333;
    padding: 0px;
}

.el-footer {
    background-color: #726fff;
    height: 48px;
    font-size: 13px;
    line-height: 48px;
    color: #ffffff;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.header {
    width: 1000px;
    height: 100%;
    margin: auto;
    display: flex;

    .logo {
        width: 200px;
        height: 45px;
        margin-top: 4px;

        img {
            width: 100%;
            height: 100%;

        }
    }

    .nav {
        width: 200px;
        height: 50px;
        color: #ffffff;

    }

    .login {
        display: flex;
        color: #ffffff;
        font-size: 13px;
        width: 100px;
        margin-left: 270px;

        .line {
            margin-left: 10px;
            margin-right: 10px;
        }
    }

    .login-after {
        width: 120px;
        margin-left: 400px;
        display: flex;

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-top: 10px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .name {
            width: 40px;
        }
    }

}
</style>
